<template>
  <div>
    <el-container>
      <el-header>&nbsp;人力资源管理系统</el-header>
      <el-container class="container">
        <el-aside width="300px">
          <Menu>

          </Menu>
        </el-aside>
        <el-container>
          <el-main
              ref="employeeFile"
              :model="employeeFile"
              :rules="employee"
          >
            <el-row>
              <el-col :span="2">
                <div class="grid-content">
                  <span>
                    档案编号
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content">
                  <el-input v-model="employeeFile.fileId" disabled placeholder="请输入档案编号" clearable />
                </div>
              </el-col>
              <el-col :span="1">
                <div class="grid-content">
                </div>
              </el-col>
              <el-col :span="9">
                <div class="grid-content bg-purple-dark">
                  <span>
                    人力资源档案登记复核
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content">
                  <el-button type="success" round @click="reviewFile('employeeFile')">复核通过</el-button>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content">
                  <span>
                    <el-button type="primary" round @click="back()">返回</el-button>
                  </span>
                </div>
              </el-col>
            </el-row>

            <div class="photo-box" >
              <div class="left">

                <el-row>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                  <span>
                    I级机构
                  </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.forgId" disabled placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="item in employee.FirstOrganization"
                            :key="employeeFile.forgId"
                            :label="item.forgName"
                            :value="item.forgId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                  <span>
                    II级机构
                  </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.sorgId" disabled placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="item in employee.SecondOrganization"
                            :key="employeeFile.sorgId"
                            :label="item.sorgName"
                            :value="item.sorgId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                  <span>
                    III级机构
                  </span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.torgId" disabled placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="item in employee.ThirdOrganization"
                            :key="employeeFile.torgId"
                            :label="item.torgName"
                            :value="item.torgId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                  <span>
                    职位分类
                  </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.cjobId" disabled placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="item in employee.JobClassification"
                            :key="employeeFile.cjobId"
                            :label="item.cjobName"
                            :value="item.cjobId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                  <span>
                    职位名称
                  </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.njobId" disabled placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="item in employee.JobName"
                            :key="employeeFile.njobId"
                            :label="item.njobName"
                            :value="item.njobId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                  <span>
                    职称
                  </span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.tjobId" placeholder="请选择" v-on:change="getSalary" style="width: 100%">
                        <el-option
                            v-for="item in employee.JobTitle"
                            :key="employeeFile.tjobId"
                            :label="item.tjobName"
                            :value="item.tjobId"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  姓名
                </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.name" placeholder="请输入姓名" clearable />
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  性别
                </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="employeeFile.gender" placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="item in employee.Gender"
                            :key="employeeFile.gender"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  E-Mail
                </span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.email" placeholder="请输入E-Mail" clearable/>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  电话
                </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.homeTel" placeholder="请输入电话号" clearable />
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  QQ
                </span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.qq" placeholder="请输入QQ号" clearable />
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  手机
                </span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.phoneNumber" placeholder="请输入手机号" clearable/>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  住址
                </span>
                    </div>
                  </el-col>
                  <el-col :span="11">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.homeAddress" placeholder="请输入住址" clearable/>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="grid-content bg-purple">
                <span>
                  邮编
                </span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="employeeFile.postcode" placeholder="请输入邮编" clearable/>
                    </div>
                  </el-col>
                </el-row>

              </div>

              <div class="right">
                <el-col :span="24">
                  <div class="photo-upload-container">
                    <!-- 上传卡片，只在未上传图片时显示 -->
                    <el-upload
                        v-if="!isImageUploaded"
                        class="upload-demo"
                        action="http://localhost:8081/employee/add/picture"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove"
                        :before-upload="beforeUpload"
                        :limit="1"
                        :on-exceed="handleExceed"
                        list-type="picture-card"
                        :on-preview="handlePreview">
                      <i class="el-icon-plus"></i>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>

                    <!-- 显示上传的图片 -->
                    <div v-if="isImageUploaded" class="uploaded-image-container">
                      <img :src="imageUrl" alt="Uploaded Image" class="uploaded-image">
                      <!-- 重新上传按钮 -->
                      <el-button type="primary" size="small" @click="reupload">重新上传</el-button>
                    </div>
                  </div>
                </el-col>

              </div>
            </div>

            <el-row>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  国籍
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.nationality" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Nationality"
                        :key="employeeFile.nationality"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  出生地
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.birthPlace" placeholder="请输入出生地点" clearable/>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  生日
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <div class="block">
                    <el-date-picker v-model="employeeFile.birthday" type="date" placeholder="Pick a day" style="width: 100%">
                    </el-date-picker>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  民族
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.nation" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Nation"
                        :key="employeeFile.nation"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  宗教信仰
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.religious" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Religious"
                        :key="employeeFile.religious"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  政治面貌
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.political" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Political"
                        :key="employeeFile.political"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  身份证号码
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.idcardNum" placeholder="请输入身份证号" clearable/>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  社会保障号码
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.ssn" placeholder="请输入社会保障号码" clearable/>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  年龄
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.age" placeholder="请输入年龄" clearable/>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  学历
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.education" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Education"
                        :key="employeeFile.education"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  教育年限
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.yearOfEducation" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.YearOfEducation"
                        :key="employeeFile.yearOfEducation"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  专业
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.major" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Major"
                        :key="employeeFile.major"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    薪酬标准
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.salaryId" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Salary"
                        :label="item.salaryName"
                        :value="item.salaryId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    开户行
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.bank" placeholder="请输入开户行" clearable/>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    银行卡号
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.bankCard" placeholder="请输入银行卡号" clearable/>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    登记人
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.registrant" disabled/>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    建档时间
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="employeeFile.createFileTime" placeholder=createFileTimeShow disabled/>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    特长
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.specialty" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Specialty"
                        :key="employeeFile.specialty"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    爱好
                  </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeFile.hobby" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employee.Hobby"
                        :key="employeeFile.hobby"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row style="height: 95px">
              <el-col :span="3">
                <div class="grid-content bg-purple" style="width: 220px; height: 95px; display:table-cell; vertical-align:middle">
                  <span>
                    个人履历
                  </span>
                </div>
              </el-col>
              <el-col :span="21">
                <div class="grid-content bg-purple-light" style="height: 95px">
                  <el-input
                      v-model="employeeFile.resume"
                      :rows="4"
                      type="textarea"
                      placeholder="请输入个人履历"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row style="height: 95px">
              <el-col :span="3">
                <div class="grid-content bg-purple" style="width: 220px; height: 95px; display:table-cell; vertical-align:middle">
                  <span>
                    家庭关系信息
                  </span>
                </div>
              </el-col>
              <el-col :span="21">
                <div class="grid-content bg-purple-light" style="height: 95px">
                  <el-input
                      v-model="employeeFile.family"
                      :rows="4"
                      type="textarea"
                      placeholder="请输入家庭关系信息"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row style="height: 95px">
              <el-col :span="3">
                <div class="grid-content bg-purple" style="width: 220px; height: 95px; display:table-cell; vertical-align:middle">
                  <span>
                    备注
                  </span>
                </div>
              </el-col>
              <el-col :span="21">
                <div class="grid-content bg-purple-light" style="height: 95px">
                  <el-input
                      v-model="employeeFile.remake"
                      :rows="4"
                      type="textarea"
                      placeholder="请输入备注（无则不填）"
                  />
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {computed, defineComponent, reactive, ref, watch} from 'vue'
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue'
import Menu from "@/components/Menu";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
export default defineComponent({
  name: "FileReviewDetail",
  components: {
    Menu,
    Location,
    Document,
    Setting,
    IconMenu,
  },
  setup() {
    const activeNames = ref(['1'])
    const handleChange = (val) => {
      console.log(val)
    }

    return {
      input: ref(''),
      textarea: ref(''),
      activeNames,
      handleChange,
    }
  },
  data() {

    return {
      isImageUploaded: false, // 控制上传卡片的显示
      imageUrl: '',
      employeeFile: {
        photo:'',
        fileId: '',
        forgId: '',
        sorgId: '',
        torgId: '',
        cjobId: '',
        njobId: '',
        tjobId: '',
        name: '',
        gender: '',
        email: '',
        homeTel: '',
        qq: '',
        phoneNumber:'',
        homeAddress: '',
        postcode: '',
        nationality: '',
        birthPlace: '',
        birthday: '',
        nation: '',
        religious: '',
        political: '',
        idcardNum: '',
        ssn: '',
        age: '',
        education: '',
        yearOfEducation: '',
        major: '',
        salaryId: '',
        bank: '',
        bankCard: '',
        registrant: '',
        createFileTime: '',
        specialty: '',
        hobby: '',
        reviewer: '',
        reviewerTime: '',
        resume: '',
        family: '',
        remake: ''
      },
      employee: {
        FirstOrganization: null,
        forgName: null,
        forgId: null,
        SecondOrganization: null,
        sorgName: null,
        sorgId: null,
        ThirdOrganization: null,
        torgName: null,
        torgId: null,
        JobClassification: null,
        cjobName: null,
        cjobId: null,
        JobName: null,
        njobName: null,
        njobId: null,
        JobTitle: null,
        tjobName: null,
        tjobId: null,
        Salary: null,
        salaryName: null,
        salaryId: null,
        Gender: [
          {
            value: '男',
            label: '男',
          },
          {
            value: '女',
            label: '女',
          },
        ],
        Nationality: [
          {
            value: '中国',
            label: '中国',
          },
          {
            value: '美国',
            label: '美国',
          },
          {
            value: '俄罗斯',
            label: '俄罗斯',
          },
          {
            value: '英国',
            label: '英国',
          },
          {
            value: '法国',
            label: '法国',
          },
          {
            value: '其他国籍',
            label: '其他国籍',
          },
        ],
        Nation: [
          {
            value: '汉族',
            label: '汉族',
          },
          {
            value: '壮族',
            label: '壮族',
          },
          {
            value: '回族',
            label: '回族',
          },
          {
            value: '维吾尔族',
            label: '维吾尔族',
          },
          {
            value: '藏族',
            label: '藏族',
          },
          {
            value: '蒙古族',
            label: '蒙古族',
          },
          {
            value: '其他民族',
            label: '其他民族',
          },
        ],
        Religious: [
          {
            value: '无宗教信仰',
            label: '无宗教信仰',
          },
          {
            value: '基督教',
            label: '基督教',
          },
          {
            value: '伊斯兰教',
            label: '伊斯兰教',
          },
          {
            value: '佛教',
            label: '佛教',
          },
          {
            value: '其他宗教',
            label: '其他宗教',
          },
        ],
        Political: [
          {
            value: '群众',
            label: '群众',
          },
          {
            value: '中共党员',
            label: '中共党员',
          },
          {
            value: '中共预备党员',
            label: '中共预备党员',
          },
          {
            value: '共青团员',
            label: '共青团员',
          },
          {
            value: '民主党派',
            label: '民主党派',
          },
          {
            value: '境外党派',
            label: '境外党派',
          },
        ],
        Education: [
          {
            value: '博士',
            label: '博士',
          },
          {
            value: '硕士',
            label: '硕士',
          },
          {
            value: '本科',
            label: '本科',
          },
          {
            value: '大专',
            label: '大专',
          },
          {
            value: '高中',
            label: '高中',
          },
          {
            value: '中专',
            label: '中专',
          },
          {
            value: '初中',
            label: '初中',
          },
          {
            value: '小学',
            label: '小学',
          },
          {
            value: '无学历',
            label: '无学历',
          },
        ],
        YearOfEducation: [
          {
            value: '大于25年',
            label: '大于25年',
          },
          {
            value: '20-24年',
            label: '20-24年',
          },
          {
            value: '15-19年',
            label: '15-19年',
          },
          {
            value: '10-14年',
            label: '10-14年',
          },
          {
            value: '5-9年',
            label: '5-9年',
          },
          {
            value: '小于5年',
            label: '小于5年',
          },
          {
            value: '未接受教育',
            label: '未接受教育',
          },
        ],
        Major: [
          {
            value: '计算机类',
            label: '计算机类',
          },
          {
            value: '经管类',
            label: '经管类',
          },
          {
            value: '财会类',
            label: '财会类',
          },
          {
            value: '电气类',
            label: '电气类',
          },
          {
            value: '其他类',
            label: '其他类',
          },
        ],
        Specialty: [
          {
            value: '数据库',
            label: '数据库',
          },
          {
            value: '前端',
            label: '前端',
          },
          {
            value: '后台',
            label: '后台',
          },
          {
            value: '产品设计',
            label: '产品设计',
          },
          {
            value: '算法设计',
            label: '算法设计',
          },
          {
            value: '其他',
            label: '其他',
          },
        ],
        Hobby: [
          {
            value: '足球',
            label: '足球',
          },
          {
            value: '篮球',
            label: '篮球',
          },
          {
            value: '排球',
            label: '排球',
          },
          {
            value: '羽毛球',
            label: '羽毛球',
          },
          {
            value: '其他',
            label: '其他',
          },
        ]
      },
    }
  },
  methods: {

    handleSuccess(response) {
      console.log(response); // 打印整个响应对象
      this.imageUrl = response;
      this.employeeFile.photo = this.imageUrl;
      this.isImageUploaded = true; // 标记图片已上传*/
      console.log(this.imageUrl); // 打印图片 URL 到控制台
    },
    handleRemove(file, fileList) {
      // 文件移除后的处理逻辑
      this.isImageUploaded = false; // 标记图片未上传
      this.imageUrl = ''; // 清空图片URL
      employeeFile.photo='';
    },
    beforeUpload(file) {
      // 上传前的逻辑，可以在这里添加文件类型或大小的限制
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 0.5;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handlePreview(file) {
      // 处理图片预览逻辑
    },
    reupload() {
      // 清空文件列表和图片URL，触发重新上传
      this.isImageUploaded = false; // 允许上传卡片显示
      this.imageUrl = ''; // 清空图片URL
    },

    reviewFile(formName) {
      this.axios.post('/employee/reviewFile',this.employeeFile,{

        //TODO 权限控制，先不写
        //TODO 提示框
        //TODO 审核人信息还没加
      }).then(res =>{
        this.axios.post('/SalaryListadd/' + this.employeeFile.torgId + '/' + this.employeeFile.fileId + '/' + this.employeeFile.name + '/' +this.employeeFile.salaryId)
      }).then(res =>{
        alert("复核成功")
        this.$router.push("/FileReview")
      })
    },
    back() {
      this.$router.push("/FileReview")
    },

    getFirstOrg() {
      this.axios.get('/selectFirstOrg').then(res =>{
        const _this = this
        _this.employee.FirstOrganization = res.data.data
      }).then(res =>{
        this.getSecondOrg()
      })
    },
    getSecondOrg() {
      this.axios.get('/selectSecondOrg/'+ this.employeeFile.forgId).then(res =>{
        const _this = this
        _this.employee.SecondOrganization = res.data.data
      }).then(res =>{
        this.getThirdOrg()
      })
    },
    getThirdOrg() {
      this.axios.get('/selectThirdOrg/'+ this.employeeFile.sorgId).then(res =>{
        const _this = this
        _this.employee.ThirdOrganization = res.data.data
      })
    },

    getJobClassification() {
      this.axios.get('/selectJobClassification').then(res =>{
        const _this = this
        _this.employee.JobClassification = res.data.data
      }).then(res =>{
        this.getJobName()
      })
    },
    getJobName() {
      this.axios.get('/selectJobName/'+ this.employeeFile.cjobId).then(res =>{
        const _this = this
        _this.employee.JobName = res.data.data
      }).then(res =>{
        this.getJobTitle()
      })
    },
    getJobTitle() {
      this.axios.get('/selectJobTitle/'+ this.employeeFile.njobId).then(res =>{
        const _this = this
        _this.employee.JobTitle = res.data.data
      }).then(res =>{
        this.getSalary()
      })
    },
    getSalary() {
      this.axios.get('/salary/selectSalary/'+ this.employeeFile.tjobId).then(res =>{
        const _this = this
        console.log(res)
        _this.employee.Salary = res.data.data
      })
    },
    getphoto(){



    }
  },
  created() {
    const fileId = this.$route.params.fileId
    const _this = this
    if(fileId) {
      this.axios.get('/employee/ReviewDetail/' + fileId).then(res =>{
        const employee = res.data.data
        _this.employeeFile.photo = employee.photo
        if(employee.photo!=null){
          _this.imageUrl = _this.employeeFile.photo; // 将图片路径赋值给imageUrl
          _this.isImageUploaded = true; // 标记图片已上传，以便显示图片
        }
        _this.employeeFile.fileId = employee.fileId
        _this.employeeFile.forgId = employee.forgId
        _this.employeeFile.sorgId = employee.sorgId
        _this.employeeFile.torgId = employee.torgId
        _this.employeeFile.cjobId = employee.cjobId
        _this.employeeFile.njobId = employee.njobId
        _this.employeeFile.tjobId = employee.tjobId
        _this.employeeFile.name = employee.name
        _this.employeeFile.gender = employee.gender
        _this.employeeFile.email = employee.email
        _this.employeeFile.homeTel = employee.homeTel
        _this.employeeFile.qq = employee.qq
        _this.employeeFile.phoneNumber = employee.phoneNumber
        _this.employeeFile.homeAddress = employee.homeAddress
        _this.employeeFile.postcode = employee.postcode
        _this.employeeFile.nationality = employee.nationality
        _this.employeeFile.birthPlace = employee.birthPlace
        _this.employeeFile.birthday = employee.birthday
        _this.employeeFile.nation = employee.nation
        _this.employeeFile.religious = employee.religious
        _this.employeeFile.political = employee.political
        _this.employeeFile.idcardNum = employee.idcardNum
        _this.employeeFile.ssn = employee.ssn
        _this.employeeFile.age = employee.age
        _this.employeeFile.education = employee.education
        _this.employeeFile.yearOfEducation = employee.yearOfEducation
        _this.employeeFile.major = employee.major
        _this.employeeFile.salaryId = employee.salaryId
        _this.employeeFile.bank = employee.bank
        _this.employeeFile.bankCard = employee.bankCard
        _this.employeeFile.registrant = employee.registrant
        _this.employeeFile.createFileTime = employee.createFileTime
        _this.employeeFile.specialty = employee.specialty
        _this.employeeFile.hobby = employee.hobby
        _this.employeeFile.reviewer = employee.reviewer
        _this.employeeFile.reviewerTime = employee.reviewerTime
        _this.employeeFile.resume = employee.resume
        _this.employeeFile.family = employee.family
        _this.employeeFile.remake = employee.remake
      }).then(res =>{
        this.getFirstOrg()
        this.getJobClassification()
      })
    }
  }
})
</script>

<style scoped>
.el-header{
  background-color: #409EFF;
  color: #e9eef3;
  text-align: left;
  line-height: 60px;
  font-size: 30px;
}
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  /*line-height: 860px;*/
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 30px;
}

body > .el-container {
  margin-bottom: 400px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row :last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.high-row{
  min-height: 200px;
}

.container{
  min-height: 860px;
}

.line {
  width: 70%;
}

.line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color-base);
}

.photo-box{
  display: flex;
  width:100%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.left{
  width:75%;
}
.right {
  width: 25%;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中子元素 */
  justify-content: center; /* 垂直居中子元素 */
  max-height: 100%;

}

.photo-upload-container {
  text-align: center;

}

.uploaded-image-container {
  width: 170px; /* 固定宽度 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中子元素 */
  text-align: center; /* 确保内部元素水平居中 */
}

.uploaded-image {
  width: 100%;
  height: 100%;

}
</style>